<template>
	<view class="pages">
		<!-- 顶部 -->
		<view class="body">
			<view class="body_title">
				今日交易额(元)
			</view>
			<view class="price">
				{{orderamount}}
			</view>
			<view class="body_cont">
				<view class="body_cont_fir">
					<view class="body_cont_fir_left">
						今日收益(元)
					</view>
					<view>
						{{orderamount}}
					</view>
				</view>
				<view class="announcement">
					<view class="announcement_left">
						<swiper class="swiper" :circular="true" :indicator-dots="false" :autoplay="true" interval="2000"
							duration="500" :vertical="true">
							<swiper-item v-for="(item,index) in notList" :key="item.index" @click="openNot(index)">
								<view class="text "><text style="color: #FF0909;padding:0 10rpx;">·</text>{{item.name}}
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="announcement_right">
						>
					</view>
				</view>
			</view>
		</view>
		<!-- 宫格 -->
		<view class="opera">
			<view v-for="(item,index) in operaData" :key="index" :index="index" class="operaDet"
				@click="skipOpera(item.url)">
				<image :src="item.icon" class="icon"></image>
				<view class="title">{{ item.title }}</view>
			</view>
		</view>
		<!-- 柱状图 -->
		<view class="echarts">
			<view class="content">
				<view class="chart-con gap">
					<view>
						<view class="justify-content-sp">
							<view class="">
								七日数据
							</view>
							<view class="">
								<text class="title_text">
									收益
								</text>
								<text class="title_text_1">
									交易额
								</text>
							</view>
						</view>
						<view>
							<l-echart ref="barChart2"></l-echart>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 公告弹窗 -->
		<uni-popup ref="pop_ups" type="center" border-radius="10px 10px 0 0">
			<view class="Pop-ups">
				<view class="title">
					{{pupups_name}}
				</view>
				<view class="text" v-html="pupups_cont">
				</view>
				<view class="bottom">
					<text class="btn" @click="pop_ups_close"> 已知晓</text>
				</view>
			</view>
		</uni-popup>
		<!-- 收款通知弹窗 -->
		<uni-popup ref="collection" type="bottom" border-radius="10px 10px 0 0">
			<view class="Pop-ups">
				<view class="title">
					收款通知
				</view>
				<view class="collection_text">
					扫码关注公众号开启收款通知与订单提醒
				</view>
				<view class="collection_img">
					<image src="../../static/index/mer01.png" mode="" class="image"></image>
					<view class="text">
						绑定成功！
					</view>
				</view>
				<view class="bottom" style="margin-top: 50px;">
					<text class="btn" @click="collection_close">我已关注</text>
				</view>
			</view>
			<view class="icon">
				<uni-icons type="close" size="40" style="color: white;"></uni-icons>
			</view>
		</uni-popup>
		<!-- 收款公告弹窗 -->
		<uni-popup ref="paymentAnnouncements" type="bottom" border-radius="10px 10px 0 0">
			<view class="Pop-ups">
				<view class="title">
					收款通知
				</view>
				<view class="collection_text">
					扫码关注公众号开启收款通知与订单提醒
					扫码关注公众号开启收款通知与订单提醒
					扫码关注公众号开启收款通知与订单提醒
					扫码关注公众号开启收款通知与订单提醒
					扫码关注公众号开启收款通知与订单提醒
					扫码关注公众号开启收款通知与订单提醒
					扫码关注公众号开启收款通知与订单提醒
					扫码关注公众号开启收款通知与订单提醒
					扫码关注公众号开启收款通知与订单提醒
					扫码关注公众号开启收款通知与订单提醒
					扫码关注公众号开启收款通知与订单提醒
				</view>
				<view class="bottom" style="margin-top: 50px;">
					<text class="btn" @click="collection_close">我已关注</text>
				</view>
			</view>
			<view class="icon">
				<uni-icons type="close" size="40" style="color: white;"></uni-icons>
			</view>
		</uni-popup>
		<!-- 商家冻结无法提现弹窗 -->
		<uni-popup ref="limit" type="center" border-radius="10px 10px 0 0">
			<view class="Pop-ups">
				<view class="limit">
					该账户涉嫌违规已被限制，暂不支持提现操作
				</view>
				<view class="limit_2">
					详情请联系客户热线
				</view>
				<view class="limit_3">
					400-806-2868
				</view>
				<view class="btn" @click="limit_close">
					我已知晓
				</view>
			</view>
		</uni-popup>
		<!-- 提现账户弹窗 -->
		<uni-popup ref="payouts" type="center" border-radius="10px 10px 0 0">
			<view class="Pop-ups">
				<view class="payouts">
					<view class="payouts_title">
						提现账户
					</view>
					<view class="payouts_body">
						<uni-section title="账户类型" type="line">
							<uni-data-select v-model="accountValue" :localdata="accountList"
								@change="change"></uni-data-select>
						</uni-section>
						<uni-section title="姓名" type="line">
							<input class="uni-input" placeholder="请输入姓名" v-model="name" />
						</uni-section>
						<uni-section title="所属银行" type="line">
							<uni-data-select v-model="bankValue" :localdata="bankList"
								@change="change"></uni-data-select>
						</uni-section>
						<uni-section title="银行账号" type="line">
							<input class="uni-input" placeholder="请输入账号" v-model="bankNumber" />
						</uni-section>
						<view class="btn" @click="payouts_close">
							确定
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 支付密码弹窗 -->
		<uni-popup ref="pay_popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="popups">
				<view class="popups_title">
					设置支付密码
				</view>
				<view class="popus_money_thr">
					<view class="popus_money_thr_title">
						设置支付密码
					</view>
					<input type="password" placeholder="请输入密码" class="password" :maxlength="6" v-model="password">
				</view>
				<view class="popus_money_thr">
					<view class="popus_money_thr_title">
						确认支付密码
					</view>
					<input type="password" placeholder="请再次输入密码" class="password" :maxlength="6" v-model="password_2">
				</view>
				<view class="btn btn_css" @click="pay_close(1)">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
	import {
		getIndex,
		getPayPwd,
		getRestPayPwd,
		getBankName,
		getNotice
	} from '../../api/index/index.js'
	export default {
		data() {
			return {
				operaData: [{
						icon: '/static/index/mer01.png',
						title: '商家列表',
						url: '/pages/business/index'
					},
					{
						icon: '/static/index/mer02.png',
						title: '交易记录',
						url: '/pages/transaction/index'
					},
					{
						icon: '/static/index/mer03.png',
						title: '我的钱包',
						url: '/pages/purse/index'
					},
					{
						icon: '/static/index/mer04.png',
						title: '账户设置',
						url: '/pages/setUp/index'
					},
					{
						icon: '/static/index/mer05.png',
						title: '收款码',
						url: '/pages/QRcode/index'
					},
					{
						icon: '/static/index/mer06.png',
						title: '转账',
						url: '/pages/transfer/index'
					}
				],
				accountValue: '',
				accountList: [{
						value: 0,
						text: "微信"
					},
					{
						value: 1,
						text: "支付宝"
					},
					{
						value: 2,
						text: "银行卡"
					},
				],
				name: '',
				bankList: [{
						id: 0,
						value: 0,
						text: "浦发银行",
						name: "张三",
						number: "123456789110231536"
					},
					{
						id: 1,
						value: 1,
						text: "邮政银行",
						name: "李四",
						number: "123456789110231536"
					}
				],
				bankValue: '',
				bankNumber: '',
				password: '',
				password_2: '',
				all_amount: '',
				orderamount: '',
				notList: [],
				pupups_name: '',
				pupups_cont: ''
			}
		},
		onLoad() {
			this.init()
		},
		mounted() {
			this.loadBarData2();
		},
		methods: {
			// 获取商家中心信息
			init() {
				getIndex().then(res => {
					this.ordernum = res.data.today_order_num;
					this.orderamount = res.data.today_order_total;
					this.settlement = res.data.today_no_settlement;
					this.all_amount = res.data.money;
					this.statistical = res.data.statistical;
					if (res.data.is_fz != 0) {
						this.Notice("冻结通知");
					}
					this.Notice("服务商");
				})
			},
			// 是否打开公告弹窗
			Notice(e) {
				var data = {
					type: e
				};
				getNotice(data).then(res => {
					if (e == "服务商") {
						this.notList = res.data;
					};
					this.pupups_name = res.data[0].name;
					this.pupups_cont = res.data[0].content;
					if (res.data[0].status == "启用") {
						this.$refs.pop_ups.open('center')
					}
				})
			},
			openNot(e) {
				this.pupups_name = this.notList[e].name;
				this.pupups_cont = this.notList[e].content;
				this.$refs.pop_ups.open('center')
			},
			// 柱状图数据
			loadBarData2() {
				//这里请求服务器得到数据
				let myData = {
					x: ['04/01', '04/02', '04/03', '04/04', '04/05'],
					y: [800, 1500, 900, 300, 2001],
					y1: [800, 1700, 1900, 2000, 701],
				};
				getIndex().then(res => {
					this.$refs.barChart2.init(echarts, chart => {
						chart.setOption({
							grid: {
								left: '1%',
								right: '1%',
								bottom: '1%',
								containLabel: true
							},
							yAxis: [{
								type: 'value'
							}],
							xAxis: [{
								type: 'category',
								data: res.data.statistical.x,
								axisTick: {
									alignWithLabel: true
								}
							}],
							tooltip: {
								trigger: 'axis',
								triggerOn: 'click',
								formatter: '{b}:  \n {a0}: {c0} \n {a1}: {c1}'
							},
							//设置颜色，这里是3条故这只3个颜色
							color: ['#00aaff', '#00ff00'],
							series: [{
									name: '收益',
									type: 'bar',
									// barWidth: '60%',
									data: res.data.statistical.y
								},
								{
									name: '交易额',
									type: 'bar',
									// barWidth: '60%',
									data: res.data.statistical.y1
								}
							]
						});

					});
				});
			},
			// 开启收款公告
			paymentAnnouncements_open() {
				this.$refs.paymentAnnouncements.open('center')
			},
			// 关闭收款公告
			paymentAnnouncements_close() {
				this.$refs.paymentAnnouncements.close('center')
			},
			change(e) {
				console.log("e:", e);
			},
			// 支付密码弹窗
			pay_open() {
				this.$refs.pay_popup.open('center')
			},
			// 关闭支付密码弹窗
			pay_close() {
				this.$refs.pay_popup.close('center')
			},
			open() {
				this.$refs.popup.open('center')
			},
			// 点击跳转
			skipOpera(e) {
				if (e == "/pages/transaction/index") {
					uni.switchTab({
						url: e
					})
				} else {
					uni.navigateTo({
						url: e
					})
				}

			},
			// 公告弹窗
			pop_ups_open() {
				this.$refs.pop_ups.open('center')
			},
			// 关闭公告弹窗
			pop_ups_close() {
				this.$refs.pop_ups.close('center')
			},
			// 收款弹窗
			collection_open() {
				this.$refs.collection.open('center')
			},
			// 关闭收款弹窗
			collection_close() {
				this.$refs.collection.close('center')
			},
			// 开启冻结弹窗
			limit_open() {
				this.$refs.limit.open('center')
			},
			// 关闭冻结弹窗
			limit_close() {
				this.$refs.limit.close('center')
			},
			// 开启绑定银行弹窗
			payouts_open() {
				this.$refs.payouts.open('center')
			},
			// 关闭绑定银行弹窗
			payouts_close() {
				this.$refs.payouts.close('center')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		width: 100%;
		height: 100%;
		position: absolute;
		background: linear-gradient(#ff5220, #f5f5f5, #f5f5f5, #f5f5f5);

		.body {
			color: #1F1F1F;

			.body_title {
				font-size: 16px;
				line-height: 23px;
			}

			.price {
				font-size: 34px;
				font-weight: bold;
				line-height: 51px;
			}

			.body_cont {
				font-size: 14px;
				line-height: 20px;
				color: #6b6b6b;

				.body_cont_fir {
					display: flex;
					justify-content: space-between;

					.body_cont_fir_left {}

					.body_cont_fir_right {}

				}

				.announcement {
					margin-top: 5px;
					border-top: 1px solid #b2b2b2;
					padding-top: 8px;
					display: flex;
					justify-content: space-between;
					color: #b2b2b2;
					font-size: 16px;

					.announcement_left {
						width: 500rpx;

						.swiper {
							height: 20px;

							.text {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								color: #6B6868;
							}
						}
					}

					.announcement_right {}
				}
			}
		}

		.opera {
			margin: 30rpx;
			background-color: white;
			padding: 30rpx 0;
			border-radius: 15rpx;
			display: flex;
			flex-wrap: wrap;

			.operaDet {
				width: calc(100% / 4);
				border-radius: 15rpx;
				text-align: center;

				.icon {
					width: 24px;
					height: 24px;
				}

				.title {
					margin-top: 10rpx;
					font-size: 26rpx;
					color: #333333;
				}
			}
		}

		.echarts {
			background-color: white;
			padding: 30rpx;
			margin: 30rpx;
			border-radius: 15rpx;

			.title_text {
				padding: 0 5px;
				border-left: 3px solid #00aaff;
			}

			.title_text_1 {
				padding: 0 5px;
				border-left: 3px solid #00ff00;
			}
		}

		.Pop-ups {
			margin-top: -100px;
			background-color: white;
			width: 600rpx;
			// height: 100%;
			padding: 30rpx 20rpx;
			border-radius: 15rpx;

			// 提现账户
			.payouts {
				.payouts_title {
					text-align: center;
					font-size: 20px;
					color: #FF460A;
				}

				.payouts_body {
					.uni-input {
						border: 1px solid #e5e5e5;
						padding: 10rpx;
						border-radius: 15px;
						font-size: 13px;
					}
				}
			}

			.limit {
				font-size: 19px;
				text-align: center;
				line-height: 30px;
				font-weight: 550;
			}

			.limit_2 {
				margin-top: 30rpx;
				text-align: center;
				font-size: 13px;
				color: #b2b2b2;
			}

			.limit_3 {
				text-align: center;
				font-weight: 600;
				font-size: 25px;
				margin-top: 30rpx;
			}

			.btn {
				color: white;
				text-align: center;
				background-color: #ff6636;
				padding: 20rpx 0;
				border-radius: 40rpx;
				margin: 50rpx 20rpx 0 20rpx;
				font-size: 20px;
			}

			.title {
				color: #ff4e16;
				font-size: 50rpx;
				text-align: center;
				padding: 20rpx 0;

				.title_body {
					color: black;
				}
			}

			.text {
				height: 250px;
				overflow: auto;
				margin-top: 10px;
			}

			.collection_text {
				text-align: center;
				padding: 20rpx;
				max-height: 200px;
				overflow: auto;
			}

			.collection_img {
				width: 80px;
				height: 80px;
				display: block;
				margin-left: auto;
				margin-right: auto;
				padding: 20rpx 20rpx 0rpx 20rpx;

				.image {
					width: 100%;
					height: 100%;
				}

				.text {
					color: #76ab7f;
				}
			}

			.bottom {
				display: flex;
				justify-content: center;

				.btn {
					padding: 15px 70px;
					background-color: #ff4b13;
					border-radius: 30px;
					color: white;
					text-align: center;
					font-size: 35rpx;
				}
			}

			.collection_bottom {
				margin-top: 40px;
			}

		}

		.icon {
			text-align: center;
			margin-top: 20px;
		}

		.popups {
			background-color: white;
			width: 640rpx;
			padding: 30rpx;
			border-radius: 30rpx;

			.popups_title {
				padding: 30rpx;
				text-align: center;
				font-size: 28px;
				color: #ff4509;
				padding: 30rpx;
			}

			.popus_money_thr {
				padding: 30rpx;

				.popus_money_thr_title {
					padding: 0 0 30rpx 0;
					font-size: 16px;
				}

				.password {
					letter-spacing: 3px;
					text-align: center;
					font-size: 50rpx;
					border: 1px solid #b2b2b2;
					padding: 10rpx;
					border-radius: 15rpx;
				}
			}

			.btn_css {
				padding: 30rpx;
				border-radius: 50rpx;
			}

			.popups_text {
				line-height: 30px;
				font-size: 18px;
			}

			.btn_css {
				margin-top: 30px;
			}
		}
	}
</style>